import BaseView from "../baseView.js";

export default class QueryCinemas extends BaseView {
    render() {
        $('#Content').html(`
            <h1>影院查询</h1>
            <hr>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">请选择地区</label>
                    <div class="layui-input-block">
                        <select id="slectQuery" name="地区" lay-verify="required">
                        <option value=""></option>
                        <option value="时代广场">时代广场</option>
                        <option value="阿拉伯地区">阿拉伯地区</option>
                        <option value="成都市">成都市</option>
                        <option value="深圳">深圳</option>
                        <option value="杭州">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button id="querytype" class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    </div>
                </div>
            </form>
            <table id="showDatas" lay-filter="showlayui"></table>

        `);

    }

    handle() {

        $("#addLayuijs").html(`

            <script>
            layui.use('form', function(){
            var form = layui.form;
            //重新渲染表单
            form.render();
            });


            layui.use('table', function(){
            var table = layui.table;

            //Demo
            layui.use('form', function(){
            var form = layui.form;
            
            });

            $('#querytype').click(() => {
                    // console.log('点击查询按钮', slectQuery.value);
                    // layer.msg(JSON.stringify('地区：'+slectQuery.value).slice(1,slectQuery.value.length+4));
                    layer.msg('地区：'+slectQuery.value);
                    //第一个实例
                    table.render({
                        elem: '#showDatas'
                        , url: '/cinema/getaddress/'+ slectQuery.value //数据接口
                        , cols: [[ //表头
                            { field: '_id', title: '影院编号', fixed: 'left' }
                            , { field: 'name', title: '影院名称', }
                            , { field: 'address', title: '影院地址' }
                            , { field: 'phone', title: '联系方式', }
                            , {
                                field: 'status', title: '是否营业', templet: function (d) {
        
                                    //得到当前行数据，并拼接成自定义模板
                                    if (d.status == true) {
                                        return '是'
                                    } else {
                                        return '否'
                                    }
                                }
                            }
                        ]]
                        , page: true
                        ,limits:[5,10,15,20]
                    });
                    return false;
    
            });
          });
          </script>
        `);
    }
}